<script setup>
import {Search } from '@element-plus/icons-vue'
import {onMounted, reactive} from "vue";
import UserApi from "../../api/UserApi.js";
import RoleApi from "@/api/RoleApi.js";
import {ElMessage} from "element-plus";
const state = reactive({
  userList:[],
  queryDto:{
    size:10,
    pageNum:1,
    userId:null,
    email:null,
    nickName:null
  },
  total:0,
  bindRoleDialog:false,
  roleList:[],
  checkdList:[],

  selectUserId:null
})
const getUserList=()=>{
  UserApi.getUserList(state.queryDto).then(res=>{
    state.userList = res.data.data
    state.total = res.data.total
    RoleApi.getAllRoles().then(res=>{
      state.roleList = res.data
    })
  })
}


const currentPageChange = (page)=>{
  state.queryDto.pageNum = page
  getUserList()
}
onMounted(()=>{
  getUserList()
})
const openRoleBindDialog = (user)=>{
  if (user.roleList &&user.roleList.length>0 ){
    user.roleList.forEach(r=>{
      state.checkdList.push(r.roleId)
    })
  }
  state.selectUserId = user.userId
  state.bindRoleDialog = true
}

const closeRoleBindDialog = ()=>{
  state.checkdList = []
  state.bindRoleDialog = false
  state.selectUserId = null
}
const bindUserRole = ()=>{
  RoleApi.bindUserRole({userId:state.selectUserId,roleIds:state.checkdList}).then(res=>{
    if (!res.flag){
      ElMessage.error(res.message)
      return
    }
    ElMessage.success("绑定成功!")
    state.checkdList = []
    state.bindRoleDialog = false
    getUserList()
  })
}
</script>
<template>
<el-card style="--el-card-border-radius: 8px">
  <el-form :inline="true" >
    <el-form-item >
      <el-input v-model="state.queryDto.userId" placeholder="用户ID" clearable />
    </el-form-item>
    <el-form-item >
      <el-input v-model="state.queryDto.email" placeholder="用户邮箱" clearable />
    </el-form-item>
    <el-form-item >
      <el-input v-model="state.queryDto.nickName" placeholder="用户昵称" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :icon="Search" @click="getUserList">搜索</el-button>
    </el-form-item>
  </el-form>
</el-card>
  <el-card style="--el-card-padding: 10px;margin-top: 10px">
    <el-table :data="state.userList" border style="width: 100%">
      <el-table-column  align="center" prop="userId" label="用户ID" width="100" />
      <el-table-column align="center" label="头像" width="100">
        <template #default="scope">
          <el-avatar :src="scope.row.avatar" :size="36"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column  align="center" prop="nickName" label="昵称" width="180" />
      <el-table-column align="center" label="性别" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.gender===1" effect="dark" >男</el-tag>
          <el-tag v-else-if="scope.row.gender===0" effect="dark" type="danger">女</el-tag>
          <el-tag v-else effect="dark" type="success">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column  align="center" prop="email" label="邮箱" width="200" />
      <el-table-column  align="center" prop="createTime" label="注册时间" width="180" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="openRoleBindDialog(scope.row)">分配角色</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="margin:20px auto;justify-content: center"
        small
        background
        layout="prev, pager, next"
        @current-change="currentPageChange"
        :total="state.total"
    />
  </el-card>
  <!-- 用户绑定角色 -->
  <el-dialog style="border-radius: 8px" v-model="state.bindRoleDialog"

             @closed="state.roleBindMenuIds=[]" width="35%" center title="分配角色">
    <el-checkbox-group v-model="state.checkdList">
      <el-checkbox v-for="role in state.roleList" :label="role.roleId" :key="role.roleId">{{role.roleName}}</el-checkbox>

    </el-checkbox-group>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeRoleBindDialog">取消</el-button>

        <el-button type="primary" @click="bindUserRole">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>



<style scoped lang="less">

:deep(.el-form-item){
  margin-bottom: 0;
}
</style>